<template>
  <div id="header">
    <el-row>
      <el-col :span="1" :offset=1>
        <el-image
            style="width: 45px;height: 45px"
            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2625606352,3477844287&fm=26&gp=0.jpg"></el-image>
      </el-col>
      <el-col :span="2">
        <strong style="font-size: 30px">靠谱</strong>
      </el-col>
      <el-col :span="2">
        <el-link href="/index"><strong style="font-size: 25px">首页</strong></el-link>
      </el-col>
      <el-col :span="2">
        <el-link href="/list"><strong style="font-size: 25px">分类</strong></el-link>
      </el-col>
      <!--输入框-->
      <el-col :span="5">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="1" style="margin-left: 10px">
        <el-button  icon="el-icon-search" round></el-button>
      </el-col>

      <div v-show="!this.isLogin">
        <el-col :span="2" :offset="4">
          <el-link href="/login"><strong style="font-size: 25px">登录</strong></el-link>
        </el-col>
        <el-col :span="2">
          <el-link href="/register"><strong style="font-size: 25px">注册</strong></el-link>
        </el-col>
      </div>
      <div v-show="this.isLogin">
        <el-col :span="2" :offset="1">
          <el-link href="/person">
            <strong style="font-size: 25px">个人中心</strong>
          </el-link>
        </el-col>
        <el-col :span="2" >
          <el-link href="/login">
            <el-image
                style="width: 40px;height: 40px"
                src="https://gitee.com/yangtao-china/picgo-image/raw/master/20210311215020.PNG"></el-image>
          </el-link>
        </el-col>
        <el-col :span="2">
          <el-link>
            <el-image
                style="width: 40px;height: 43px"
                src="https://gitee.com/yangtao-china/picgo-image/raw/master/20210311215256.PNG"></el-image>
          </el-link>
        </el-col>
        <el-col :span="2">
          <el-link>
            <i
                @click="log_out"
                class="el-icon-close">退出登录</i>
          </el-link>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "myheader",
  mounted() {
    this.userid= SessionStorage.get("SESSION_KEY_LOGIN_MEMBER").userId

    if(this.userid ===undefined){
      this.isLogin=false
    }
    this.isLogin=true
  },
  data() {
    return {
      input: '',
      userid:'',
      isLogin:false
    }
  },
  methods:{
    // 退出登录
   async  log_out(){
      SessionStorage.clearAll()
    }
  }
}
</script>

<style scoped>
#header {
  height: 70px;
  background-color: aliceblue;
}
</style>